import React, {Component} from 'react'
import 'antd/dist/antd.css'
import store from '../store'
import TodoUi from "./TodoUi";
// import axios from 'axios'
import {getTodoList} from "../store/actionCreators";

export default class Todo extends Component {
    constructor(props) {
        super(props);
        console.log(store.getState())
        this.state = store.getState()
        this.handleIpt = this.handleIpt.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleDel = this.handleDel.bind(this);
        store.subscribe(() => {
            // console.log('change store',this)
            this.setState(store.getState())
        })
    }

    render() {
        return (

            <TodoUi
                inputVal={this.state.inputVal}
                list={this.state.list}
                handleSubmit={this.handleSubmit}
                handleIpt={this.handleIpt}
                handleDel={this.handleDel}
            />

        )
    }
    componentDidMount() {
        const action = getTodoList()
        store.dispatch(action)
            // console.log(JSON)
            // const arr = JSON.parse(rrr.data)
            // console.log(JSON.parse(rrr.data))
            // begin json false later right yes data be obj
            // this.setState(()=>{
            //     return {list: [...rrr.data]}
            // })

    }

    handleIpt(emm) {
        const action = {
            type: 'change_input_val',
            value: emm.target.value
        }
        console.log(emm.target.value)
        store.dispatch(action)
    }

    handleSubmit() {
        if (!this.state.inputVal) return
        const action = {
            type: 'push_list',
        }
        store.dispatch(action)
    }

    handleDel(index) {
        const action = {
            type: 'del_ind',
            index
        }
        store.dispatch(action)
        console.log(index)
        console.log(action)
    }

}

